<template>
	<view class="container">
		<view class="content">
			<!-- 地址信息 -->
			<view class="address" @click="goAddress()" v-if="showAddress">
				<view class="address-left">
					<image src="/static/image/address.png"></image>
				</view>
				<view class="address-right">
					<view class="address-info">
						<view class="address-info-top">
							{{address.address || '请选择地址'}} {{address.house || ''}}
						</view>
						<view class="address-info-bottom" v-if="address.id">
							<text class="address-name">{{address.nickname}}</text>
							<text class="address-phone">{{address.phone}}</text>
						</view>
					</view>
					<view class="address-righticon">
						<image src="/static/icon/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods">
				<view class="goods-info" v-for="(item,index) in goods" :key="item.id">
          <view class="goods-item">
            <view class="goods-left">
              <image :src="item.product.cover"></image>
            </view>
            <view class="goods-center">
              <text class="goods-name">{{item.product.name}}</text>
              <text class="goods-num">数量：{{item.count}} {{item.sku.unit || ''}}</text>
            </view>
            <view class="goods-right">
              ￥<text class="goods-price">{{item.sku.price}}</text>
            </view>
          </view>
				</view>
			</view>
			<!-- 预约时间选择 -->
			<view class="appointment-time" v-if="showAppointmentTime">
				<view class="appointment-header">
					<view class="appointment-title">
						<view class="appointment-icon">📅</view>
						<text>预约时间</text>
						<view class="appointment-status" :class="{'completed': isAppointmentComplete}">
							{{ isAppointmentComplete ? '✓' : '!' }}
						</view>
					</view>
					<text class="appointment-subtitle">请选择您方便的时间段</text>
				</view>
				<view class="appointment-content">
					<view class="appointment-item" :class="{'selected': appointmentDate}">
						<view class="appointment-label">
							<text class="label-text">预约日期</text>
							<text class="label-required">*</text>
						</view>
						<picker mode="date" :value="appointmentDate" :start="minAppointmentDate" @change="onDateChange">
							<view class="appointment-value" :class="{'placeholder': !appointmentDate, 'selected': appointmentDate}">
								<text>{{appointmentDate || '请选择日期'}}</text>
								<image src="/static/icon/right.png" class="picker-arrow"></image>
							</view>
						</picker>
					</view>
					<view class="appointment-item" :class="{'selected': startTime}">
						<view class="appointment-label">
							<text class="label-text">开始时间</text>
							<text class="label-required">*</text>
						</view>
						<picker mode="time" :value="startTime" @change="onStartTimeChange">
							<view class="appointment-value" :class="{'placeholder': !startTime, 'selected': startTime}">
								<text>{{startTime || '请选择时间'}}</text>
								<image src="/static/icon/right.png" class="picker-arrow"></image>
							</view>
						</picker>
					</view>
					<view class="appointment-item" :class="{'selected': endTime}">
						<view class="appointment-label">
							<text class="label-text">结束时间</text>
							<text class="label-required">*</text>
						</view>
						<picker mode="time" :value="endTime" @change="onEndTimeChange">
							<view class="appointment-value" :class="{'placeholder': !endTime, 'selected': endTime}">
								<text>{{endTime || '请选择时间'}}</text>
								<image src="/static/icon/right.png" class="picker-arrow"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="appointment-tips">
					<text class="tips-text">💡 温馨提示：预约日期必须提前一天，如需修改请联系客服</text>
				</view>
			</view>
			<!-- 新增余额抵扣区域 -->
<!--			<view class="balance-bar">-->
<!--				<view class="balance-label">余额抵扣</view>-->
<!--				<view class="balance-info">-->
<!--					<text>可用余额：￥{{ userBalance }}</text>-->
<!--					<switch v-show="!disableBalanceSwitch" :checked="useBalance" @change="onBalanceChange" color="#FFD29F" :disabled="disableBalanceSwitch" />-->
<!--				</view>-->
<!--			</view>-->
			<!-- 新增会员卡余额抵扣区域 -->
<!--			<view class="balance-bar" v-if="userCardBalance > 0">-->
<!--				<view class="balance-label">会员卡余额抵扣</view>-->
<!--				<view class="balance-info">-->
<!--					<text>可用余额：￥{{ userCardBalance }}</text>-->
<!--					<switch v-show="!disableCardBalanceSwitch" :checked="useCardBalance" @change="onCardBalanceChange" color="#FFD29F" :disabled="disableCardBalanceSwitch" />-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="coupon" @click="chooseCoupon">-->
<!--				<view class="coupon-left">-->
<!--					优惠券-->
<!--				</view>-->
<!--				<view :class="[discountDetail ? 'active' : '', 'coupon-right']">-->
<!--					<text >{{ discountDetail ? discountDetail : '请选择优惠券'}}</text>-->
<!--					<image src="/static/icon/right.png"></image>-->
<!--					<text v-if="selectedCoupon" class="coupon-cancel" @click.stop="cancelCoupon">取消</text>-->
<!--				</view>-->
<!--			</view>-->
      <!-- 备注输入区 -->
      <view class="remarks-section">
        <view class="remarks-header">
          <text class="remarks-title">订单备注</text>
          <text class="remarks-subtitle">（选填）</text>
        </view>
        <view class="remarks-input-container">
          <textarea 
            class="remarks-input" 
            v-model="remarks" 
            placeholder="请输入订单备注信息，如特殊要求、配送时间等"
            maxlength="200"
            :show-count="true"
            :auto-height="true"
            :fixed="true"
          ></textarea>
        </view>
      </view>
      
      <!-- 金额明细区 -->
      <view class="amount-detail">
        <view class="amount-row">
          <text>商品总额</text>
          <text>￥{{ amount.amount }}</text>
        </view>
<!--        <view class="amount-row" v-if="amount.coupon_deduct > 0">-->
<!--          <text>优惠券抵扣</text>-->
<!--          <text class="minus">-￥{{ amount.coupon_deduct }}</text>-->
<!--        </view>-->
<!--        <view class="amount-row" v-if="amount.balance_deduct > 0">-->
<!--          <text>余额抵扣</text>-->
<!--          <text class="minus">-￥{{ amount.balance_deduct }}</text>-->
<!--        </view>-->
<!--        <view class="amount-row" v-if="amount.card_balance_deduct > 0">-->
<!--          <text>会员卡余额抵扣</text>-->
<!--          <text class="minus">-￥{{ amount.card_balance_deduct }}</text>-->
<!--        </view>-->
<!--        <view class="amount-row total">-->
<!--          <text>实付金额</text>-->
<!--          <text class="total-pay">￥{{ amount.payment_amount }}</text>-->
<!--        </view>-->
      </view>
		</view>
		<!-- 底部栏 -->
		<view class="bottombar">
			<view class="bottombar-content">
				<ZButton class="primary-btn" @click="submit()">提交订单</ZButton>
      </view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
  import ZButton from "../../components/ZButton.vue";
	export default {
    components: {ZButton},
		data() {
			return {
				address: {
				},
				goods: [],
        discount: 0,
        discountDetail: null,
        selectedCoupon: null,
        userBalance: 0,
        useBalance: false,
        disableBalanceSwitch: false,
        userCardBalance: 0,
        useCardBalance: false,
        disableCardBalanceSwitch: false,
        userCardId: 0,
        cart_id: 0,
        appointmentDate: '',
        startTime: '',
        endTime: '',
        sku_id: 0,
        quantity: 0,
        remarks: '',
			}
		},
    computed: {
      showAddress() {
        return true
      },
      showAppointmentTime() {
        return false
      },
      isAppointmentComplete() {
        return this.appointmentDate && this.startTime && this.endTime
      },
      minAppointmentDate() {
        // 最小预约日期为后天（提前一天）
        return dayjs().add(1, 'day').format('YYYY-MM-DD')
      },
      goodsCount() {
        let count = 0
        this.goods.forEach(item => {
          count += item.count
        })
        return count
      },
      amount() {
        let amount = 0
        this.goods.forEach(item => {
          amount += item.count * item.sku.price
        })

        // 抵扣逻辑：优惠券 → 会员卡余额 → 账户余额
        let payment = amount

        // 1. 先用优惠券抵扣
        payment = payment - this.discount
        if (payment < 0) payment = 0

        // 2. 再用会员卡余额抵扣
        let cardBalanceDeduct = 0
        if (this.useCardBalance && payment > 0) {
          cardBalanceDeduct = Math.min(this.userCardBalance, payment)
          payment = payment - cardBalanceDeduct
          if (payment < 0) payment = 0
        }

        // 3. 最后用账户余额抵扣
        let balanceDeduct = 0
        let disableBalance = payment <= 0
        if (!disableBalance && this.useBalance) {
          balanceDeduct = Math.min(this.userBalance, payment)
          payment = payment - balanceDeduct
          if (payment < 0) payment = 0
        }

        return {
          amount,
          payment_amount: Number(payment.toFixed(2)),
          balance_deduct: Number(balanceDeduct.toFixed(2)),
          card_balance_deduct: Number(cardBalanceDeduct.toFixed(2)),
          coupon_deduct: Number(this.discount.toFixed(2)),
          disableBalance,
          disableCardBalance: payment <= 0
        }
      },
    },
    watch: {
      // 监听优惠券和余额抵扣联动
      discount() {
        // 只有优惠券抵扣后金额<=0时，自动关闭余额抵扣
        if ((this.amount.amount - this.discount) < 0 && this.useBalance) {
          this.useBalance = false
        }
        if ((this.amount.amount - this.discount) < 0 && this.useCardBalance) {
          this.useCardBalance = false
        }
        this.disableBalanceSwitch = this.amount.disableBalance
        this.disableCardBalanceSwitch = this.amount.disableCardBalance
      },
      useBalance(val) {
        // 勾选余额抵扣时，自动清空优惠券（如需共享则注释掉）
        // if (val) {
        //   this.selectedCoupon = null
        //   this.discount = 0
        //   this.discountDetail = null
        //   uni.removeStorageSync('selectedCoupon')
        // }
      },
      useCardBalance(val) {
        // 勾选会员卡余额抵扣时的逻辑
        // if (val) {
        //   this.selectedCoupon = null
        //   this.discount = 0
        //   this.discountDetail = null
        //   uni.removeStorageSync('selectedCoupon')
        // }
      }
    },
    onShow() {
      if (!this.userInfo.id) {
        return
      }
      // // 读取选中的优惠券
      // const selectedCoupon = uni.getStorageSync('selectedCoupon')
      // if (selectedCoupon && selectedCoupon.id) {
      //   // 选择优惠券时自动关闭余额抵扣
      //   // this.useBalance = false
      //   this.selectedCoupon = selectedCoupon
      //   this.discount = this.calcDiscount(selectedCoupon)
      //   this.discountDetail = this.getCouponDesc(selectedCoupon)
      // } else {
      //   this.selectedCoupon = null
      //   this.discount = 0
      //   this.discountDetail = null
      // }
      // this.getUserBalance()
      // // 联动禁用余额开关
      // this.disableBalanceSwitch = this.amount.disableBalance
      // this.disableCardBalanceSwitch = this.amount.disableCardBalance
      //
      // // 设置默认预约时间
      // if (this.showAppointmentTime && !this.appointmentDate) {
      //   // 默认预约日期为后天（提前一天）
      //   this.appointmentDate = dayjs().add(1, 'day').format('YYYY-MM-DD')
      //   this.startTime = '09:00'
      //   this.endTime = '10:00'
      // }
      // let query = {
      //   status: 1,
      //   user_id: this.userInfo.id
      // }
      // if (this.cart_id) {
      //   query.id = this.cart_id
      // }
      // // uni.removeStorageSync('selectedCoupon')
      // this.$api.getCartList(query).then(res => {
      //   this.goods = res.list
      // })
      // this.$api.getUserCardList({ user_id: this.userInfo.id }).then(res => {
      //   if (res.length === 0) return
      //   // 最后一张卡
      //   this.userCardBalance = res[res.length - 1].current_balance
      //   this.userCardId = res[res.length - 1].id
      // })
      // // 联动禁用余额开关
      this.$api.getProductSku(this.sku_id).then(res => {
        this.goods = [{
          sku: res,
          product: res.product,
          count: this.quantity
        }]
      })
      let address = uni.getStorageSync('selectedAddress');
      console.log('address',address)
      this.address = address
    },
    onLoad({ sku_id, quantity }) {
      this.sku_id = sku_id
      this.quantity = quantity
    },
		methods: {
      getUserBalance() {
        this.$store.dispatch('getUserInfo').then(res => {
          // 假设有API或store，实际可替换为真实接口
          if (res && res.balance !== undefined) {
            this.userBalance = res.balance
          } else {
            // 可用余额接口
            this.userBalance = 0
          }
        })
      },
      onBalanceChange(e) {
        // 余额抵扣被勾选时，自动清空优惠券
        this.useBalance = e.detail.value
      },
      onCardBalanceChange(e) {
        // 会员卡余额抵扣被勾选时的处理
        this.useCardBalance = e.detail.value
      },
      chooseCoupon() {
        // 计算抵扣后剩余可支付金额
        let amountLeft = 0
        let total = 0
        this.goods.forEach(item => {
          total += item.count * item.sku.price
        })

        // 抵扣逻辑：优惠券 → 会员卡余额 → 账户余额
        let payment = total - this.discount
        if (payment < 0) payment = 0

        if (this.useCardBalance) {
          let cardBalanceDeduct = Math.min(this.userCardBalance, payment)
          payment = payment - cardBalanceDeduct
          if (payment < 0) payment = 0
        }

        if (this.useBalance) {
          let balanceDeduct = Math.min(this.userBalance, payment)
          payment = payment - balanceDeduct
          if (payment < 0) payment = 0
        }

        amountLeft = payment

        if (amountLeft <= 0) {
          uni.showToast({
            icon: 'none',
            title: '当前抵扣后无需支付，无法再使用优惠券'
          })
          return
        }

        console.log('amountLeft', amountLeft)
        uni.navigateTo({
          url: `/pages/coupon/coupon?source=payment&amount=${amountLeft.toFixed(2)}`
        })
      },
			// 跳转地址管理页面
			goAddress() {
				uni.navigateTo({
					url: "/pages/address/address"
				})
			},
			// 提交订单
			submit() {
        if (!this.userInfo.id) {
          uni.showModal({
            title: '提示',
            content: '请先登录',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/login/index'
                });
              }
            }
          })
          return;
        }
        // 验证收货地址
        if (!this.address.id) {
          uni.showToast({
            icon: 'none',
            title: '请选择收货地址'
          })
          return;
        }
        this.$api.createOrder({
          address_id: this.address.id || 0,
          address_detail: this.address.address + ' ' + this.address.house || '',
          address_phone: this.address.phone,
          address_nickname: this.address.nickname,
          user_id: this.userInfo.id,
          user_card_id: this.useCardBalance ? this.userCardId : 0,
          discount_amount: this.discount || 0,
          discount_coupon_id: this.selectedCoupon ? this.selectedCoupon.id : 0,
          delivery_fee_config_id: 0,
          delivery_amount: 0,
          amount: this.amount.amount,
          payment_amount: this.amount.payment_amount,
          balance_deduct: this.amount.balance_deduct,
          card_balance_deduct: this.amount.card_balance_deduct,
          appointment_date: this.appointmentDate,
          appointment_start_time: this.startTime,
          appointment_end_time: this.endTime,
          payment_type: 'wxin',
          order_delivery: 'express',
          count: this.goodsCount,
          goods: this.goods,
          remark: this.remarks
        }).then(res => {
          if (!res) {
            uni.showToast({
              icon: 'none',
              title: '下单失败',
            })
            return
          }
          if (res.status === 'paid') {
            // 支付成功
            uni.showLoading({
              title: '支付成功',
            })
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages/cart/paymentinfo?orderId=" + res.id
              })
            }, 1000);
          } else {
            this.getPay(res.id)
          }
        })
			},
      getPay(order_id){
        uni.showLoading({
          title:'微信支付请求'
        });
        const that = this
        this.$api.createPay({
          order_id
        }).then(payment =>{
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: payment.timestamp,
            nonceStr: payment.nonce_str,
            package: payment.package,
            signType: payment.signType,
            paySign: payment.paySign,
            success:(result)=> {
              uni.showToast({
                title:'支付成功'
              });
            },
            fail: (result) => {
              uni.showToast({
                icon:'none',
                title:'支付失败',
              });
            },
            complete: () => {
              setTimeout(() => {
                uni.redirectTo({
                  url: "/pages/cart/paymentinfo?orderId=" + order_id
                })
              }, 1000);
            }
          });
        }).catch(res=>{
          this.loading = false;
          setTimeout(() => {
            uni.redirectTo({
              url: "/pages/cart/paymentinfo?orderId=" + order_id
            })
          }, 1000);
        })
      },
      calcDiscount(coupon) {
        let total = 0
        this.goods.forEach(item => {
          total += item.count * item.price
        })
        if (!coupon || !coupon.coupon) return 0
        if (coupon.coupon.coupon_type === 1 || coupon.coupon.coupon_type === 3) {
          if (total >= (coupon.coupon.min_amount || 0)) {
            return Number(coupon.coupon.amount)
          }
        } else if (coupon.coupon.coupon_type === 2) {
          if (total >= (coupon.coupon.min_amount || 0)) {
            return Number((total * (1 - coupon.coupon.discount / 10)).toFixed(2))
          }
        }
        return 0
      },
      getCouponDesc(coupon) {
        if (!coupon || !coupon.coupon) return ''
        if (coupon.coupon.coupon_type === 1) {
          return `满${coupon.coupon.min_amount}减${coupon.coupon.amount}`
        }
        if (coupon.coupon.coupon_type === 2) {
          return `${coupon.coupon.discount}折`
        }
        if (coupon.coupon.coupon_type === 3) {
          return `无门槛减${coupon.coupon.amount}`
        }
        return ''
      },
      cancelCoupon() {
        this.selectedCoupon = null
        this.discount = 0
        this.discountDetail = null
        uni.removeStorageSync('selectedCoupon')
      },
      onDateChange(e) {
        this.appointmentDate = e.detail.value
      },
      onStartTimeChange(e) {
        this.startTime = e.detail.value
      },
      onEndTimeChange(e) {
        this.endTime = e.detail.value
      }
		}
	}
</script>

<style>
	page {
    height: 100%;
    overflow: hidden;
		background: #F5F5F5;
	}
</style>

<style lang="scss">
  .container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .primary-btn {
      width: 100%;
    }
  }
	.content {
    flex-grow: 1;
		margin: 20rpx 30rpx;
    overflow: auto;
	}
	.address {
		display: flex;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx 20rpx;

		.address-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.address-right {
      flex-grow: 1;
			display: flex;
			align-items: center;

			.address-info {
        flex-grow: 1;
				display: flex;
				flex-direction: column;
				padding: 0rpx 40rpx 0rpx 20rpx;

				.address-info-top {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}

				.address-info-bottom {
					font-size: 24rpx;
					color: #999999;
					margin-top: 6rpx;

					.address-phone {
						margin-left: 16rpx;
					}
				}
			}

			.address-righticon {

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.goods {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-top: 22rpx;
		display: flex;
		flex-direction: column;
		gap: 44rpx;

		.logistics {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			padding-bottom: 30rpx;

			.logistics-left {
				font-weight: 600;
			}

			.logistics-right {
				color: #f56c6c;
			}
		}
    .goods-item {
      display: flex;
      padding: 10rpx 0rpx;

      .goods-left {

        image {
          width: 130rpx;
          height: 130rpx;
        }
      }

      .goods-center {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0rpx 60rpx 0rpx 30rpx;

        .goods-name {
          font-size: 26rpx;
          font-weight: 600;
          color: #333333;
        }

        .goods-spec {
          font-size: 22rpx;
          color: #999999;
          margin-top: 10rpx;
        }

        .goods-num {
          font-size: 22rpx;
          color: #999999;
          margin-top:20rpx;
        }
      }

      .goods-right {
        font-size: 22rpx;
        font-weight: 600;
        color: #ff4d4f;
        .goods-price {
          font-size: 32rpx;
        }
      }

    }

	}

	.appointment-time {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 22rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		border: 1rpx solid #F5F5F5;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
		}

		.appointment-header {
			display: flex;
			flex-direction: column;
			gap: 8rpx;
			margin-bottom: 10rpx;

			.appointment-title {
				display: flex;
				align-items: center;
				gap: 12rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;

				.appointment-icon {
					width: 40rpx;
					height: 40rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(135deg, #FFD29F 0%, #FFB74D 100%);
					border-radius: 8rpx;
					color: #FFFFFF;
					animation: pulse 2s infinite;
				}

				.appointment-status {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					font-weight: bold;
					background: #FFE0B2;
					color: #F57C00;
					margin-left: 10rpx;
					transition: all 0.3s ease;

					&.completed {
						background: #C8E6C9;
						color: #388E3C;
						animation: bounce 0.6s ease;
					}
				}
			}

			.appointment-subtitle {
				font-size: 24rpx;
				color: #999999;
				margin-left: 52rpx;
			}
		}

		.appointment-content {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
		}

		.appointment-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 12rpx;
			border-bottom: 1rpx solid #F5F5F5;
			transition: all 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&.selected {
				border-left: 4rpx solid #FFD29F;
				padding-left: 16rpx;
				background: linear-gradient(90deg, rgba(255, 210, 159, 0.1) 0%, transparent 100%);
				transform: translateX(4rpx);
			}

			.appointment-label {
				display: flex;
				align-items: center;
				gap: 8rpx;
				font-size: 28rpx;
				color: #333333;

				.label-text {
					font-size: 28rpx;
					font-weight: 500;
				}

				.label-required {
					color: #FF5722;
					font-weight: bold;
				}
			}

			.appointment-value {
				font-size: 28rpx;
				color: #333333;
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 12rpx;
				padding: 12rpx 16rpx;
				background: #F8F9FA;
				border-radius: 8rpx;
				min-width: 200rpx;
				transition: all 0.3s ease;
				border: 2rpx solid transparent;

				&.placeholder {
					color: #999999;
					background: #F5F5F5;
				}

				&.selected {
					background: linear-gradient(135deg, #E8F5E8 0%, #F0F8F0 100%);
					border-color: #67C23A;
					color: #2E7D32;
					font-weight: 500;
				}

				&:active {
					background: #E9ECEF;
					transform: scale(0.98);
				}

				.picker-arrow {
					width: 24rpx;
					height: 24rpx;
					opacity: 0.6;
					transition: transform 0.3s ease;
				}

				&:active .picker-arrow {
					transform: rotate(90deg);
				}
			}
		}

		.appointment-tips {
			margin-top: 16rpx;
			padding: 16rpx;
			background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
			border-radius: 12rpx;
			border-left: 4rpx solid #2196F3;
			animation: slideIn 0.5s ease;

			.tips-text {
				font-size: 24rpx;
				color: #1976D2;
				line-height: 1.5;
			}
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}

	@keyframes bounce {
		0%, 20%, 53%, 80%, 100% {
			transform: translate3d(0,0,0);
		}
		40%, 43% {
			transform: translate3d(0, -8rpx, 0);
		}
		70% {
			transform: translate3d(0, -4rpx, 0);
		}
		90% {
			transform: translate3d(0, -2rpx, 0);
		}
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.coupon {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.coupon-left {
			font-size: 30rpx;
		}

		.coupon-right {
			display: flex;
			align-items: center;
      color: #999393;
      &.active {
        color: #F55726;
      }
			text {
				font-size: 28rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.bottombar {
    flex-shrink: 0;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

    padding-bottom: 50rpx;
		.bottombar-content {
      width: 100%;
      display: flex;
      align-items: center;
			padding: 16rpx 30rpx 20rpx 32rpx;
			.bottombar-label {
				font-size: 22rpx;
				color: #F55726;
			}

			.bottombar-price {
				font-size: 32rpx;
				font-weight: 600;
				color: #F55726;
				margin-right: 28rpx;
			}

		}

		button {
			border-radius: 36rpx;
			background: #FFD29F;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.balance-bar {
		background: #fff;
		border-radius: 20rpx;
		margin: 22rpx 0 0 0;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.balance-label {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}
	.balance-info {
		display: flex;
		align-items: center;
		gap: 24rpx;
		font-size: 26rpx;
		color: #888;
	}
  .coupon-cancel {
    color: #f44336;
    font-size: 24rpx;
    margin-left: 16rpx;
    border: 1rpx solid #f44336;
    border-radius: 8rpx;
    padding: 2rpx 12rpx;
    background: #fff;
  }
  .amount-detail {
    background: #fff;
    border-radius: 12rpx;
    margin: 22rpx 0 0 0;
    padding: 30rpx;
    font-size: 26rpx;
  }
  .amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    color: #333;
  }
  .amount-row.total {
    font-size: 30rpx;
    font-weight: bold;
    color: #F55726;
    margin-top: 18rpx;
    margin-bottom: 0;
  }
  .amount-row .minus {
    color: #FFD29F;
  }
  .amount-row .total-pay {
    color: #F55726;
    font-size: 34rpx;
    font-weight: bold;
  }
  .amount-row.summary-row {
    font-size: 28rpx;
    color: #333;
    margin-top: 18rpx;
    margin-bottom: 0;
    font-weight: 500;
  }
  .summary-pay {
    color: #F55726;
    font-size: 30rpx;
    font-weight: bold;
  }
  
  // 备注输入区样式
  .remarks-section {
    background: #fff;
    border-radius: 12rpx;
    margin: 22rpx 0 0 0;
    padding: 30rpx;
    
    .remarks-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .remarks-title {
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
      }
      
      .remarks-subtitle {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
    
    .remarks-input-container {
      .remarks-input {
        width: 100%;
        min-height: 120rpx;
        padding: 20rpx;
        border: 2rpx solid #f0f0f0;
        border-radius: 8rpx;
        font-size: 28rpx;
        color: #333;
        background: #fafafa;
        line-height: 1.5;
        resize: none;
        box-sizing: border-box;
        
        &:focus {
          border-color: #FFD29F;
          background: #fff;
        }
        
        &::placeholder {
          color: #999;
          font-size: 26rpx;
        }
      }
    }
  }
  .bottombar-content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 16rpx 30rpx 20rpx 32rpx;
    justify-content: center;
  }
  .submit-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    background: #FFD29F;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    margin: 0;
    box-shadow: 0 4rpx 16rpx rgba(78,142,247,0.08);
  }
</style>
